<template>
    <el-main>
        <div class="container-fluid" id="modelfluid"  style="margin-top:70px;">
            <nav class="navbar navbar-light absolute row">
                <a type="button" class="btn btn-lg " v-show="modular.explain" @click="setbtn(0, 'explain')" :class="active(0)">用法说明</a>
                <a type="button" class="btn btn-lg " v-show="modular.video" @click="setbtn(1,'video')" :class="active(1)">视频演示</a>
                <a type="button" class="btn btn-lg " v-show="modular.study" @click="setbtn(2,'study')" :class="active(2)">动手制作</a>
                <a type="button" class="btn btn-lg " v-show="modular.knowledge" @click="setbtn(3, 'knowledge')" :class="active(3)">知识点</a>
            </nav>
            <div class="row margintop" id="explain"  v-if="modular.explain" v-show="bgcolor == 0">
                <div class="col-md-12">
                    <br >
                    <h3>1.{{name}}的使用</h3>
                    <p v-html="modular.explain.text"></p>
                    <div class="bgmodular text-center" >
                    <img :src="modular.explain.img" alt="">

                    </div>
                </div>
            </div>
            <div class="row" id="video"  v-if="modular.video" v-show="bgcolor == 1">
                <div class="col-md-12">
                    <br >
                    <h3>2.视频演示</h3>
                    <video :src="modular.video"  controls="controls" width="60%"></video>
                </div>
            </div>
            <div class="row" id="study"  v-if="modular.study" v-show="bgcolor == 2">
                <div class="col-md-12">
                    <br >
                    <h3>3.学习程序</h3>
                    <div class="row bgmodular" v-for="(v,k) in modular.study.code" :Key="k">
                      <div class="col-md-12 text-center">
                      <img :src="v.img" alt="">

                      </div>
                      <br>
                    <router-link  style="font-size:40px;width:228px; height:74px; margin:0 auto;line-height: 74px; cursor: pointer;background-color:#20cbd4; color:#fff;border-radius: 30px;" :to="{name:'bigShot', query:{cgqid:model,nameid:id,codeid:k}}"  class=" btn-block text-center">开始制作</router-link>
                    </div>

                </div>
            </div>
            <div class="rwo" id="knowledge"  v-if="modular.knowledge" v-show="bgcolor == 3">
                <div class="col-md-12" >
                    <br >
                    <h3>4.知识点</h3>
                    <p v-html="modular.knowledge" ></p>
                </div>
            </div>
            <p class="text-center" v-if="allimg" v-html="allimg" >

            </p>
        </div>

    </el-main>
</template>

<script>
window.onload = function() {};
export default {
  name: "classright",
  data() {
    return {
      name:'',
      bgcolor: 0,
      modular: {
        explain: {
          text: "",
          img: ""
        },
        study: {
          code: [],
          meke: {}
        }
      },
      model:null,
      id:null,
      allimg:''
    };
  },
  mounted() {
    this.model = this.$route.query.model ? this.$route.query.model : 0;
    this.id = Number(this.$route.params.id)
    this.name = modulars[this.model].mode[this.id].name
    this.modular = modulars[this.model].mode[this.id].rightcon;

  },
  beforeRouteUpdate (to, from, next) {
    this.model = to.query.model
    this.id = to.params.id
    this.name = modulars[this.model].mode[this.id].name
    this.modular = modulars[this.model].mode[this.id].rightcon;
    if(this.model == 2){
      this.allimg = modulars[2].allimgs
    }else {
      this.allimg = ""
    }
    next()
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  methods: {
    back() {},
    setbtn(i, id) {

      this.bgcolor = i;


    },
    active(i) {
      if (i === this.bgcolor) {
        return "bg20cdb4";
      } else {
        return "bgffc72a";
      }
    },
    scroll() {
    }
  }
};
</script>


<style scoped>

.bgmodular {
  background-image: url(../../assets/images/bgmodular.png);
  padding: 15px;
}
img {
  max-width: 100%;
}
.col {
  margin: 37px;
}
.absolute {
  position: absolute;
  top: 72px;
  background-color: #ffe063;
  width: 100%;
  padding: 30px;
  z-index: 70;

}
.el-main {
  background: url(../../assets/images/dbdkbg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
video {
  display: block;
  margin: 0 auto;
  margin-top: 30px;
}

.navbar {
  display: block;
}
.col-md-12 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.btn-lg {
  height: 52px;
  width: 162px;
  font-size: 32px;
  line-height: 52px;
  border-radius: 12px;
  padding: 0px;
}

@media only screen and (max-width: 1200px) {
    .btn-lg {
        height: 36px;
        width: 108px;
        font-size: 18px;
        line-height: 36px;
        border-radius: 12px;
        padding: 0px;
    }
}
.btn-block {
  line-height: 45px;
  font-size: 24px;
}
.bg20cdb4 {
  background-color: #20cdb4;
  color: #fff;
}
.bgffc72a {
  background-color: #ffc72a;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}
.margintop {
  margin-top: 90px;
}
.code {
  margin: 20px auto;
}


</style>
